<template>
	<!-- 体检预约 -->
	<view class="physical">
		<view class="header">
			<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/my/yuyuejilu.png'" mode="widthFix" @click="C_btn(1)"></image>
			<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/my/addtjr.png'" mode="widthFix" @click="C_btn(2)"></image>
		</view>
		
		<view class="list">
			<view> <text>姓名</text> <input type="text" v-model="form.name" placeholder="请输入姓名" /></view>
			<view>
				<text>性别</text>
				<view class="sex">
					<view @click="form.gender = 1">
						<image v-if="form.gender" class='seximg' :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck1.png'" mode="widthFix"></image>
						<image v-else class='seximg' :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<text>男</text>
					</view>
					<view @click="form.gender = 0">
						<image v-if="form.gender" class='seximg' :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<image v-else class='seximg' :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck1.png'" mode="widthFix"></image>
						<text>女</text>
					</view>
				</view>
			</view>
			<view> <text>出生日期</text><input type="text" @click="$refs.date.show();chooseTimeType = 'birthday'" disabled v-model="form.birthday" placeholder="请选择出生日期" /></view>
			<view> <text>手机号码</text><input type="text" v-model="form.phone" placeholder="请输入手机号码" maxlength="11" /></view>
			<view> <text>体检时间</text><input type="text" @click="$refs.date.show();chooseTimeType = 'appoint_time'" disabled v-model="form.appoint_time" placeholder="请选择体检时间" /></view>
		</view>
		<view class="submit" @click="C_addtjr">确定</view>
		
		<view class="tjrList">
			<view v-for="(item,index) in list" :key='index'>
				<view class="one">
					<text>{{item.name}}</text>
					<text>{{item.gender == 1?'男':'女'}}</text>
					<text>{{item.phone}}</text>
				</view>
				<view>出生日期:{{item.birthday}}</view>
				<view>体检日期:{{item.appoint_time}}</view>
			</view>
		</view>
		<view class="submit" v-if="list.length" @click="C_submit">提交</view>
		
		<uni-popup ref="popup" type="center">
			<view class="model">
				<image v-if="vuex_httpImageUrl" :src="vuex_httpImageUrl+'static/my/组 1.png'" mode="widthFix"></image>
				<view class="submit" @click="$refs.popup.close()">我知道了</view>
			</view>
		</uni-popup>
		
		<w-picker
			:visible.sync="visible"
			mode="date" 
			:current="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="visible = false"
			:disabled-after="false"
			ref="date" 
		></w-picker>
	</view>
</template>

<script>
	import yz from '@/common/yz.js'
	export default {
		data() {
			return {
				visible:false,
				chooseTimeType:'',
				form:{
					name:'',
					phone:'',
					gender:0,
					birthday:'',
					appoint_time:''
				},
				list:[]
			};
		},
		methods:{
			C_addtjr(){
				let {name,phone,gende,birthday,appoint_time,} = this.form
				if(!name){this.$u.toast('请输入姓名');return};
				if(!birthday){this.$u.toast('请选择出生日期');return};
				if(!yz.isMobile(phone)){this.$u.toast('请输入正确的手机号');return};
				if(!appoint_time){this.$u.toast('请选择体检日期');return};
				
				
				this.list.unshift(JSON.parse(JSON.stringify(this.form)))
				this.form = {name:'',phone:'',gender:0,birthday:'',appoint_time:''}
			},
			onConfirm(val){
				this.form[this.chooseTimeType] = val.value
			},
			C_btn(state){
				console.log(state);
				if(state == 1){
					uni.navigateTo({
						url:'./JI_LU/JI_LU'
					})
				}
				if(state == 2){
					
				}
			},
			C_submit(){
				let medical_json = this.list.filter(item=>item.gender == 0?item.gender = '女':item.gender = '男')
				this.$u.post('/appuser/add_medical',{
					medical_json:JSON.stringify(medical_json)
				}).then(res=>{
					if(res.code == 0){
						this.$u.toast('提交成功')
						this.list = []
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.physical{
		input{
			text-align: right;
		}
		// 体检人列表
		.tjrList{
			border-top: 1px solid rgba(0,0,0,.1);
			margin: auto;
			padding: 0rpx 40rpx;
			background-color: #FFFFFF;
			max-height: 73vh;
			overflow-y: scroll;
			>view{
				padding: 20rpx 0;
				border-bottom: 1px solid rgba(0,0,0,.1);
				>view{
					margin-top: 10rpx;
					text{
						margin-right: 30rpx;
					}
				}
				&:last-child{
					border: 0;
				}
			}
		}
	}
	
	.header {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 15rpx;

		>view {
			text-align: center;
			padding: 30rpx 0;
			border-radius: 20rpx;
			border: 1px solid red;
			width: 48%;
		}
	}

	.list {
		overflow: hidden;
		width: 95%;
		border-radius: 20rpx;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		box-sizing: border-box;

		>view {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;
			border-bottom: 1px solid rgba(0, 0, 0, .05);

			.sex {
				display: flex;
				align-items: center;

				>view {
					margin-left: 30rpx;
					display: flex;
					align-items: center;

					.seximg {
						width: 25rpx;
						height: 25rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.submit {
		text-align: center;
		padding: 20rpx;
	}

	.model{
		background-color: #FFFFFF;
		width: 60%;
		margin: auto;
		padding: 50rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		image{
			max-width: 100%;
			display: block;
			margin: auto;
		}
	}
</style>
